<template>
  <div class="work-detail-container">
    <a-row type="flex" justify="center" v-if="template">
      <a-col :span="8" class="cover-img">
        <img :src="template.coverImg" alt=""/>
      </a-col>
      <a-col :span="8">
        <h2>{{ template.title }}</h2>
        <p>{{ template.title }}</p>
        <div class="author">
          <a-avatar>V</a-avatar>
          该模版由 <b>{{ template.author }}</b> 创作
        </div>
        <div class="bar-code-area">
          <span>扫一扫，手机预览</span>
          <div ref="container"></div>
        </div>
        <div class="use-button">
          <router-link to="/editor">
            <a-button type="primary" size="large">
              使用模版
            </a-button>
          </router-link>
          <a-button size="large">
            下载图片海报
          </a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { GlobalDataProps } from '../store/index'
import { Avatar } from 'ant-design-vue'

export default defineComponent({
  components:{
    [Avatar.name]:Avatar
  },
  setup() {
    const store = useStore<GlobalDataProps>()
    const route = useRoute()
    const currentId = route.params.id as string
    const template = computed(() => store.getters.getTemplateById(Number.parseInt(currentId)))
    return {
      route,
      template
    }
  }
})
</script>

<style scoped>
.work-detail-container {
  margin: 50px auto;
  min-height: 80vh;
}

.cover-img {
  margin-right: 30px;
}

.cover-img img {
  width: 100%;
}

.use-button {
  margin: 30px 0;
}

.ant-avatar {
  margin-right: 10px;
}

.bar-code-area {
  margin: 20px 0;
}
</style>
